<template>
  <div class="SjzxLeftThemePicFire">
      <div class="fireLegend">
        <div class="legendTitle">图例</div>
        <div class="legendBox">
            <div class="legendItem" v-for="(item, index) of fireLevel" :key="index">
                <span class="colorBlock" :style="{background:item.color}"></span>
                <span class="title">{{item.title}}</span>
            </div>
        </div>
      </div>
  </div>
</template>

<script>
let shpLayer = null;
let cityLabel = [];
export default {
    name:"SjzxLeftThemePicFire",
    data(){
        return{
            fireLevel:[ 
                { color:"rgba(255, 255, 0, 0.6)", title:"一般治理区" },
                { color:"rgba(255, 128, 0, 0.6)", title:"森林火灾易发区" },
                { color:"rgba(255, 0, 0, 0.6)", title:"森林火灾高风险区" },
            ],
            cityCenter:{
                "海口市":[110.198418,20.045805],
                "三亚市":[109.511709,18.252865],
                "三沙市":[112.234483,16.774644],
                "儋州市":[109.580812,19.520948],
                "五指山市":[109.516784,18.774827],
                "文昌市":[110.797473,19.544234],
                "琼海市":[110.474524,19.259112],
                "万宁市":[110.392605,18.793697],
                "东方市":[108.651829,19.095187],
                "定安县":[110.358001,19.681215],
                "屯昌县":[110.101667,19.351662],
                "澄迈县":[110.007497,19.738885],
                "临高县":[109.690508,19.912025],
                "白沙黎族自治县":[109.4429,19.221641],
                "昌江黎族自治县":[109.055783,19.298139],
                "乐东黎族自治县":[109.173384,18.750063],
                "陵水黎族自治县":[110.037553,18.506045],
                "保亭黎族苗族自治县":[109.700373,18.640156],
                "琼中黎族苗族自治县":[109.838389,19.033369]
            },
        }
    },
    mounted(){
        this.addShp();
    },
    methods:{
        // 添加火险等级专题图
        addShp(){
            shpLayer = viewer.imageryLayers.addImageryProvider(
                new Cesium.WebMapServiceImageryProvider({
                    url:'http://36.112.11.166:8310/geoserverplus/gwc/service/wms?layer=icenter:森林灾害等级Copy-PNG-4326&TILED=true',
                    // url:'http://172.25.110.35:8310/geoserverplus/gwc/service/wms?layer=icenter:hainan-PNG-4326&TILED=true',
                    layers: `icenter:森林灾害等级Copy-PNG-4326`,
                    parameters: {
                        service: 'WMS',
                        format: 'image/png',
                        style: ""
                    },
                    tileWidth: 256,
                    tileHeight: 256,
                    srs: "EPSG:4326"
                })
            )
            for(var key in this.cityCenter) {
                let label = viewer.entities.add({
                    id: key,//渔船没有id,其他都是id
                    position: Cesium.Cartesian3.fromDegrees(this.cityCenter[key][0], this.cityCenter[key][1]),
                    label: {
                        text: key,
                        show: true,
                        font: '15pt Source Han Sans CN', //字体样式
                        fillColor: Cesium.Color.LAWNGREEN, //字体颜色
                        outlineColor: Cesium.LabelStyle.BLACK,
                        style: Cesium.LabelStyle.FILL_AND_OUTLINE, //label样式
                        outlineWidth: 4,
                        // heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
                        verticalOrigin: Cesium.VerticalOrigin.TOP, //垂直位置
                        horizontalOrigin: Cesium.HorizontalOrigin.CENTER, //水平位置
                        pixelOffset: new Cesium.Cartesian2(0, -10), //偏移
                        scaleByDistance: new Cesium.NearFarScalar(100000, 1.5, 1000000, 0.5),
                        // distanceDisplayCondition: ele.distance?new Cesium.DistanceDisplayCondition(labelDistance[ele.distance][1], labelDistance[ele.distance][0]):new Cesium.DistanceDisplayCondition(0,6000),
                    },
                })
                cityLabel.push(label)
            }
        },
        // 清除火险等级专题图
        clearShp(){
            shpLayer && viewer.imageryLayers.remove(shpLayer)
            shpLayer = null;
            cityLabel.forEach(ele=>{
                viewer.entities.remove(ele)
            })
            cityLabel = [];
        },
    },
    beforeUnmount(){
        this.clearShp();
    },
}
</script>

<style lang="stylus" scoped>
.SjzxLeftThemePicFire{
    .fireLegend{
        position:fixed;
        left:420;
        bottom:10;
        width:200px;
        padding-bottom:20px;
        background url('/images/sjzx/tuli.png') no-repeat;
        background-size:100% 100%;
        display:flex;
        flex-direction:column;
        .legendTitle {
            width: 100%;
            height: 30px;
            line-height: 30px;
            padding-top: 5px;
            color: #FEBF65;
            font-size: 20px;
            text-align: center;
        }
        .legendBox{
            margin-top:10px;
            margin-left:10px;
            .legendItem{
                display:flex;
                align-items:center;
                margin-bottom:20px;
                &:last-child{
                    margin-bottom:0;
                }
                .colorBlock{
                    width:20px;
                    height:20px;
                    margin-right:10px;
                }
            }
        }
    }
}
</style>